<template>
  <div class="index" :class="modell">
    <div class="header" :class="modell">
      <div class="nowdate">
        <div class="day">{{day}}</div>
        <div class="month">{{month | convertToChinaNum}}月</div>
      </div>
      <div class="say-hi">{{Hours>17?'晚上好':'知乎日报'}}</div>
      <div class="user-icon" @click="goMy()">
        <img src="https://pic1.zhimg.com/da8e974dc_s.jpg" width="100%" height="100%" alt />
      </div>
    </div>
    <div class="banner">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,i) in topStoriesData" :key="i">
            <div class="bn1">
              <div class="msk"></div>
              <img
                :src="item.image"
                @click="goStoryContent(item.id)"
                width="100%"
                height="100%"
                alt
              />
              <div class="title">{{item.title}}</div>
              <div class="author">{{item.hint}}</div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="到底了"
        @load="onLoad"
        offset="200"
        loading-text
      >
        <stotiesItem :storiesData="newStoriesData"></stotiesItem>
        <stotiesItem :storiesData="item" v-for="(item,index) in oldStoriesData" :key="index"></stotiesItem>
      </van-list>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import stotiesItem from "../components/stories-item.vue";
import Swiper, { Pagination, Autoplay } from "swiper";
export default {
  name: "index",
  components: {
    stotiesItem
  },
  data() {
    return {
      modell: "",
      loading: false,
      finished: false,
      topStoriesData: [],
      hisStoriesData: [],
      newStoriesData: {},
      oldStoriesData: [],
      Hours: new Date().getHours(),
      day: 0,
      month: 0,
      limit: 0
    };
  },
  methods: {
    getNewStories() {
      this.axios({
        method: "get",
        url: "stories/latest"
      })
        .then(result => {
          this.topStoriesData = result.data.top_stories;
          this.newStoriesData = result.data;
          let _that = this;
          this.$nextTick(() => {
            _that.ininSwiper();
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    ininSwiper() {
      new Swiper(".swiper", {
        modules: [Pagination, Autoplay],
        observer: true,
        observeParents: true,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      });
    },
    getOldStories(date = this.getBeforeDate(0)) {
      this.axios({
        methods: "get",
        url: "stories/before/" + date
      })
        .then(result => {
          if (result) {
            this.oldStoriesData.push(result.data);
            this.loading = false;
            this.limit++;
          } else {
            return;
          }
        })
        .catch(err => {
          console.log(err);
          this.finished = true;
        });
    },
    getBeforeDate(date) {
      let data = date;
      let d = new Date();
      let year = d.getFullYear();
      let mon = d.getMonth() + 1;
      let day = d.getDate();
      if (day <= data) {
        if (mon > 1) {
          mon = mon - 1;
        } else {
          year = year - 1;
          mon = 12;
        }
      }
      d.setDate(d.getDate() - data);
      year = d.getFullYear();
      mon = d.getMonth() + 1;
      day = d.getDate();
      let s =
        year + (mon < 10 ? "0" + mon : mon) + (day < 10 ? "0" + day : day);
      return s;
    },
    onLoad() {
      let _that = this;
      let date = _that.getBeforeDate(_that.limit);
      this.$nextTick(() => {
        _that.getOldStories(date);
      });
    },
    goStoryContent(StoryID) {
      this.$router.push({
        name: "Story",
        params: {
          storyid: StoryID
        }
      });
    },
    goMy() {
      this.$router.push({
        name: "My"
      });
    }
  },
  created() {
    this.day = new Date().getDate();
    this.month = new Date().getMonth() + 1;
    this.getNewStories();
    this.getBeforeDate(0);
    this.modell = localStorage.getItem("modell");
  },
  filters: {
    convertToChinaNum(num) {
      var arr1 = new Array(
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九"
      );
      var arr2 = new Array(
        "",
        "十",
        "百",
        "千",
        "万",
        "十",
        "百",
        "千",
        "亿",
        "十",
        "百",
        "千",
        "万",
        "十",
        "百",
        "千",
        "亿"
      );
      if (!num || isNaN(num)) {
        return "零";
      }
      var english = num.toString().split("");
      var result = "";
      for (var i = 0; i < english.length; i++) {
        var des_i = english.length - 1 - i; //倒序排列设值
        result = arr2[i] + result;
        var arr1_index = english[des_i];
        result = arr1[arr1_index] + result;
      }
      result = result.replace(/零(千|百|十)/g, "零").replace(/十零/g, "十");
      result = result.replace(/零+/g, "零");
      result = result.replace(/零亿/g, "亿").replace(/零万/g, "万");
      result = result.replace(/亿万/g, "亿");
      result = result.replace(/零+$/, "");
      result = result.replace(/^一十/g, "十");
      return result;
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../node_modules/swiper/swiper-bundle.min.css";

.pd {
  padding-top: 20px;
}
.header {
  width: 100%;
  height: 50px;
  position: fixed;
  z-index: 99999;
  right: 0;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  background-color: #fff;

  .nowdate {
    position: relative;
    &.nowdate::after {
      content: "";
      right: -10px;
      height: 100%;
      top: 0;
      display: block;
      border-right: 1px solid rgb(216, 216, 216);
      position: absolute;
    }
    margin-left: 15px;
    margin-right: 10px;
    .day {
      font-size: 18px;
      font-weight: 600;
    }
    .month {
      font-size: 10px;
    }
  }
  .say-hi {
    text-indent: 10px;
    font-weight: 600;
    font-size: 20px;
    flex: 1;
  }
  .user-icon {
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid rgb(219, 219, 219);
    width: 24px;
    height: 24px;
    margin-right: 15px;
    overflow: hidden;
  }
}
.banner {
  margin-top: 50px;

  .bn1 {
    position: relative;
    .msk {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 100px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    .title {
      width: 220px;
      left: 10px;
      bottom: 45px;
      color: #eee;
      position: absolute;
      font-size: 18px;
    }
    .author {
      left: 10px;
      bottom: 20px;
      color: #eee;
      position: absolute;
    }
  }
}
.swiper-slide {
  position: relative;
}
.swiper-pagination {
  left: 40vw;
  position: absolute;
}
/deep/ .swiper-pagination-bullet {
  border-radius: 50%;
  width: 3px;
  height: 3px;
  background: #eee;
  margin: 0 5px;
}
/deep/ .swiper-pagination-bullet-active {
  border-radius: 20px;
  height: 3px;
  width: 16px;
  background-color: #fff;
}
.dark {
  background-color: #000;
  color: rgb(155, 155, 155);
}
</style>